<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #Buts {
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>

    <canvas id="canvas">

    </canvas>
    <div id="Buts">
        <button id="former">正</button>
        <button id="top">顶</button>
        <button id="left">侧</button>
    </div>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_PvM4;
    uniform mat4 u_ModelM4;
    uniform float u_PointSize;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        if(distance(gl_PointCoord,vec2(0.5,0.5)) < 0.5)
        {
            gl_FragColor = u_Color;
        }
    }
</script>
<script type="module">
    //#region 
    import { Matrix4, Vector2, Vector3, Color, PerspectiveCamera, OrthographicCamera, Quaternion, Spherical } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js';
    //#endregion

    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");
    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
    //#endregion


    //#region 创建相机
    const [fov, aspect, near, far] = [
        45, //摄像机的弧度
        canvas.width / canvas.height,   //投影的宽高比
        1,  //投影窗口的最小z值
        20  //投影窗口的最大z值
    ];
    const camera = new PerspectiveCamera(fov, aspect, near, far);
    //#endregion

    //#region 创建相机
    // const halfH = 2;
    // const ratio = canvas.width / canvas.height;
    // const halfW = halfH * ratio;

    // const [left, right, top, bottom, near, far] = [
    //     -halfW, halfW,
    //     halfH, -halfH,
    //     -10, 10
    // ];
    // const camera = new OrthographicCamera(left, right, top, bottom, near, far);
    //#endregion





    const pvM4 = new Matrix4();
    const eye = new Vector3(0, 0.5, 3);//相机位置
    const lookAt = new Vector3(0, 0, 0);//看向的位置
    const zoomScale = 0.05;//缩放系数
    const length = 99;//坐标长度

    const polyArr = [];

    var cameraController = new CameraController({
        camera: camera,
        canvas: canvas,
        pvMatrix: pvM4,
        rendEvent: rend,
        eye: eye,
        lookAt: lookAt,
    });



    // console.log(camera.type)



    //Main
    (function main() {

        let poly1 = create(
            [1, 0, 0, 1],
            new Matrix4().setPosition(-0.5, 0, -3)
        );
        let poly2 = create(
            [0, 1, 0, 1],
            new Matrix4().setPosition(0.5, 0, -3)
        );
        let poly3 = create(
            [0, 0, 1, 1],
            new Matrix4().setPosition(-0.5, 0, -2)
        );
        let poly4 = create(
            [1, 1, 1, 1],
            new Matrix4().setPosition(0.5, 0, -2)
        );

        //世界坐标轴
        let poly5 = new Poly({
            gl: gl,
            arr: [
                0, -length, 0,
                0, length, 0,
                length, 0, 0,
                -length, 0, 0,
                0, 0, length,
                0, 0, -length
            ],
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: [1, 1, 1, 1]
                },
                'u_PvM4': {
                    type: 'uniformMatrix4fv',
                    value: pvM4.elements
                },
                'u_ModelM4': {
                    type: 'uniformMatrix4fv',
                    value: new Matrix4().elements
                },
            }
        });

        //视点
        let poly6 = new Poly({
            gl: gl,
            arr: [
                lookAt.x,
                lookAt.y,
                lookAt.z,
            ],
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: [0.5, 0.5, 0.5, 1]
                },
                'u_PvM4': {
                    type: 'uniformMatrix4fv',
                    value: pvM4.elements
                },
                'u_ModelM4': {
                    type: 'uniformMatrix4fv',
                    value: new Matrix4().elements
                },
                'u_PointSize': {
                    type: 'uniform1f',
                    value: 5
                }
            }
        });

        polyArr.push(
            [['TRIANGLES'], poly1],
            [['TRIANGLES'], poly2],
            [['TRIANGLES'], poly3],
            [['TRIANGLES'], poly4],
            [['LINES'], poly5],
            [['POINTS'], poly6],
        )

        rend();
    })();








    //创建Poly
    function create(color, modelM4) {
        // poly.draw(["TRIANGLES", "POINTS"]);
        return new Poly({
            gl: gl,
            arr: [
                0, 0.3, 0,
                0.3, -0.3, 0,
                -0.3, -0.3, 0
            ],
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: color
                },
                'u_PvM4': {
                    type: 'uniformMatrix4fv',
                    value: pvM4.elements
                },
                'u_ModelM4': {
                    type: 'uniformMatrix4fv',
                    value: modelM4.elements
                },
            }
        });
    }

    //渲染
    function rend() {
        if (!polyArr || polyArr.length == 0) return;
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        polyArr[5][1].arr = [lookAt.x, lookAt.y, lookAt.z];
        polyArr[5][1].updateAttribute();
        polyArr.forEach(u => {
            u[1].init();
            u[1].draw(u[0]);
        });
    }



</script>

</html>